<template>
  <div class='sale-head'>
    <div v-for="(item, index) in formaltData" :key="index" :class="item.class">
      <span class="name">{{item.label}}</span>
      <span v-show="item.label=='查看更多'" class="iconfont icon-gengduo_huaban-copy ml5 color-blue"></span>
    </div>
  </div>
</template>
<script>
export default {
  props:['data'],
  components: {},
  name: "",
  data() {
    return {
      headData:[
        {label:"热销爆款",class:"title color-yellow ft20"},
        {label:"换一批",class:"ft14 ml-auto hover"},
        {label:"查看更多",class:"ft14 ml15 mr15 hover",},
      ]
    };
  },
  computed:{
    formaltData(){
      return this.data||this.headData
    }
  }, 
  methods: {},
  created() {}
};
</script>
<style lang="scss" scoped>
.sale-head {
  line-height: 48px;
  box-sizing: border-box;
  border-bottom: 1px solid #efefef;
  background-color: #fff;
  color: #666;
  display: flex;
  
  .title{
    font-weight: 600;
    padding: 0 10px;
  }
  .border-blue .name{
    border-left: 5px solid $blue;
    padding-left: 15px!important;
  }
  .border-yellow .name{
    border-left: 5px solid $yellow;
    padding-left: 15px!important;
  }
  .border-red .name{
    border-left: 5px solid $red;
    padding-left: 15px!important;
  }
  .border-green .name{
    border-left: 5px solid $green;
    padding-left: 15px!important;
  }
}
</style>